<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    #batchUpload {
        margin-left: 450px;
    }

    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<body>
<div class="container">
    <h3>试卷上传</h3>
    <form enctype="multipart/form-data" id="batchUpload" action="user/upload" method="post" class="form-horizontal">
        <br>
        <input type="file" name="file" style="width:0px;height:0px;" id="uploadEventFile"><br>
        <input id="uploadEventPath" disabled="disabled" type="text"><br><br>
        <button class="btn btn-primary btn-xs" id="uploadEventBtn" style="height:26px;" type="button">选择文件</button>
        <br><br>
        <select id="grade">
            <option value="0" selected="selected">请选择年级</option>
            <option value="1">高一（上）</option>
            <option value="2">高一（下）</option>
            <option value="3">高二（上）</option>
            <option value="4">高二（下）</option>
            <option value="5">高三（上）</option>
            <option value="6">高三（下）</option>
        </select>　
        <select id="paperType">
            <option value="0" selected="selected">试卷类型</option>
            <option value="1">当天作业</option>
            <option value="2">周末作业</option>
            <option value="3">寒暑假作业</option>
            <option value="4">月考</option>
            <option value="5">期中考</option>
            <option value="6">期末考</option>
        </select><br><br><br>
        <button type="button" class="btn btn-info btn-sm" onclick="user.uploadBtn()">上传</button>
    </form>
</div>
</body>
<script>

    //牟强

    var User = function () {
        this.init = function () {
            //模拟上传excel
            $("#uploadEventBtn").unbind("click").bind("click", function () {
                $("#uploadEventFile").click();
            });
            $("#uploadEventFile").bind("change", function () {
                $("#uploadEventPath").attr("value", $("#uploadEventFile").val());
            });
        };
        //点击上传按钮
        this.uploadBtn = function () {
            var uploadEventFile = $("#uploadEventFile").val();
            if (uploadEventFile == '') {
                layer.msg("请选择excel,再上传", function () {
                });
            } else if (uploadEventFile.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                layer.msg("只能上传Excel文件", function () {
                });
            } else {
                var formData = new FormData();   //必须是new FormData后台才能接收到
                var paperType = $("#paperType").val();//作业的类型
                var grade = $("#grade").val();//选择的年级
                formData.append("filee", $("#uploadEventFile")[0].files[0]);
                formData.append("paperType", paperType);
                formData.append("grade", grade);
                var storage = window.localStorage;
                var token = storage.getItem("token");
                var refreshtoken = storage.getItem("refreshToken");
                formData.append("refreshToken", refreshtoken)
                $.ajax({
                    url: 'uploadingTestPaper',
                    type: 'post',
                    data: formData,
                    headers: {
                        "token": token,
                        "refreshToken": refreshtoken
                    },
                    datatype: "josn",
                    contentType: false,//必须false才会自动加上正确的Content-Type
                    processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
                    success: function (result) {
                        console.info(result.code);
                        if (result.code == 302) {
                            window.parent.location.href = "../login.html";
                        } else if (result.code == 0) {
                            layer.msg("上传成功");
                        } else {
                            layer.msg("上传失败，系统正在维护中");
                        }
                    },
                    error: function () {
                        layer.msg("excel上传失败", function () {
                        });
                    },
                    complete: function (xhr, data) {
                        var tokne = xhr.getResponseHeader("token");
                        if (tokne != null) {
                            //更新本地token
                            storage.setItem("token", token);
                        }
                    }
                });
            }
        };
    }
    var user;
    $(function () {
        user = new User();
        user.init();
    });
</script>
</html>